<template>
    <Layout :style="{height: '100%',padding: '0px'}">
        <Header :style="{ borderTopLeftRadius: '10px',borderTopRightRadius: '10px'}">
            <ButtonGroup shape="circle" >
                <Button type="primary" @click.native="CreateView">新增</Button>
                <Button type="error" @click.native="deleteconfirm = true;singleorlist = true;">删除</Button>
                <Button type="warning" @click.native="UpdateView">修改</Button>
                <Button type="info" @click.native="InfoView">查阅</Button>
            </ButtonGroup>
            
            <Dropdown v-if="dataoption" @on-click="HandleData" trigger="click" style="margin-left: 20px">
                <Button type="primary">
                    数据处理
                    <Icon type="ios-arrow-down"></Icon>
                </Button>
                <DropdownMenu slot="list" :style="{top: '160px',left: '480px'}">
                    <DropdownItem name="ImportData">导入数据</DropdownItem>
                    <DropdownItem name="ExportData">导出数据</DropdownItem>
                </DropdownMenu>
            </Dropdown>
            
            <Input 
                v-model.trim="keyword" 
                @on-search="QueryResult"
                suffix="ios-search" 
                placeholder="请输入检索内容！" 
                :style="{width: 'auto',float: 'right',marginTop: '18px',marginRight: '0px',borderRadius : '30px'}" 
                :clearable="true" 
                :search="true" />
            <Button 
                v-if="advancequery"
                @click.native="AdvanceQuery"
                type="primary"
                :style="{width: '100px',float: 'right',marginTop: '18px',marginRight: '20px',borderRadius : '30px'}" >
                高级查询
            </Button>
        </Header>
        <!-- width="1694" height="674"  -->
        <Content>
            <Content :style="{padding: '6px', minHeight: '280px', background: 'white',borderBottomLeftRadius: '10px',borderBottomRightRadius: '10px',height: '99%'}">
                <Table border 
                    :height="tableHeight"
                    :columns="tablecolumns"
                    :data="tabledata" 
                    :loading="loadingTable"
                    :stripe="true" 
                    :highlight-row="true"
                    :show-summary="isSummary"
                    :summary-method="handleSummary"
                    show-context-menu
                    ref="GridTable"
                    size="small"
                    context-menu
                    @on-select="selectedMutiple"
                    @on-select-cancel="selectCancel"
                    @on-select-all="selectAll"
                    @on-select-all-cancel="selectAllCancel"
                    @on-row-click="selectedsingle"
                    @on-row-dblclick="UpdateView"
                    @on-contextmenu="handleContextMenu">
                    <template slot="contextMenu" style="text-align:center">
                        <!-- <DropdownItem @click.native="handleContextMenuDetail" >查看</DropdownItem> -->
                        <DropdownItem @click.native="CreateView">新增</DropdownItem>
                        <DropdownItem @click.native="UpdateView">编辑</DropdownItem>
                        <DropdownItem @click.native="deleteconfirm=true;singleorlist = false;" style="color: #ed4014">删除</DropdownItem>
                    </template>
                </Table>
            </Content>
        </Content>
        <Modal v-model="deleteconfirm" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <Alert type="error">
                    删除警告
                    <span slot="desc">
                        你即将删除，相关信息会一并删除，是否要继续？ <Icon type="help-circled" size="14"></Icon>
                    </span>
                </Alert>
            </div>
            <div slot="footer">

                <Button v-if="singleorlist" type="error" size="large" long @click="DeleteList">删除</Button>
                <Button v-else type="error" size="large" long @click="Delete">删除</Button>
            </div>
        </Modal>
        <Modal
            :value="showmodal"
            :title="title"
            :style="{ overflower:'auto'}"
            :fullscreen="fullscreen"
            scrollable
            @on-cancel="cancel"
            footer-hide>
            <router-view />
        </Modal>
    </Layout>
</template>
<script>

export default {
    name: 'GridTable',
    props: {
        tablecolumns: Array,
        tabledata: Array,
        creatrouter: String,
        editrouter: String,
        showmodal: Boolean,
        title: String,
        //width: Number,
        //height: Number,
        fullscreen: Boolean,
        loadingTable:Boolean,
        advancequery:Boolean,
        advancemethod:Function,
        routeroot: String,
        modalname: String,
        vuexnamespace: String,
        pageIndex: Number,
        pageSize: Number,
        deletesingle: Function,
        deletelist: Function,
        handleSummary: Function,
        isSummary: Boolean,
        query: Function,
        dataoption: Boolean,
        handledata: Function,
    },
    computed: {

    },
    mounted(){
        const height = this.isSummary ? window.innerHeight - 301 : window.innerHeight - 261;
        this.tableHeight = height;
    },
    methods: {
        InfoView (){
            alert('aaaa');
        },
        CreateView (){
            this.$store.dispatch(this.vuexnamespace + '/CreateView')
            //console.log(this.creatrouter)
            this.$router.push( "/" + this.routeroot + "/" + this.creatrouter);
        },
        UpdateView (){
            //const id = this.tabledata.findIndex(item => item.index === row.index);
            if(this.selectedRow != '' && this.selectedRow != null){
                this.$store.dispatch(this.vuexnamespace + '/UpdateView',this.selectedRow);
            }
            else{
                this.$Notice.warning({
                    title: '操作提示',
                    desc: '请选择一条数据！'
                });
            }
            this.$router.push( "/" + this.routeroot + "/" + this.editrouter);
        },
        Create (){
            this.$store.dispatch(this.vuexnamespace + '/CreateAsync')
        },
        Delete (){
            /* this.$store.dispatch(this.vuexnamespace + '/DeleteAsync',{
                PageIndex: this.pageIndex,
                PageSize: this.pageSize,
                DeleteRow: this.selectedRow
            }) */
            this.deletesingle(this.selectedRow);
            this.deleteconfirm = false;
        },
        DeleteList (){
            /* this.$store.dispatch(this.vuexnamespace + '/DeleteListAsync',{ 
                PageIndex: this.pageIndex,
                PageSize: this.pageSize,
                DeleteRows: this.selectedRows
            }) */
            this.deletelist(this.selectedRows);
            this.deleteconfirm = false;
        },
        HandleData(name){
            this.handledata(name);
        },
        handleContextMenu (row) {
            this.selectedsingle(row);
            //this.contextLine = index + 1;
        },
        selectedsingle (row){
            this.selectedRow = row.Id
            this.$store.commit(this.vuexnamespace + '/SETTING_ID',this.selectedRow);
        },
        selectedMutiple (selection,row){
            this.selectedRows.push(row.Id)
        },
        selectCancel (selection,row){
            this.selectedRows.pop(row.Id)
        },
        selectAll(selection){
            selection.forEach(element => {
                this.selectedRows.push(element.Id)
            });
        },
        selectAllCancel(selection){
            selection.forEach(element => {
                this.selectedRows.pop(element.Id)
            });
        },
        cancel (){
            //this.$Message.warning('按了cancel键');
            this.$Notice.warning({
                title: '操作提示',
                desc: '取消编辑！ '
            });
            this.$store.dispatch(this.vuexnamespace + '/Cancel');
            this.selectedRow=null;
            //this.$router.push("/"+this.routeroot +"/"+ this.modalname);
            this.$router.go(-1)
        },
        AdvanceQuery(){
            this.advancemethod(this.keyword);
        },
        QueryResult(){
            this.query(this.keyword);
        }
    },
    data(){
        return{
            contextLine: 0,
            tableHeight: 710,
            selectedRow: '',
            selectedRows: [],
            keyword: '',
            loading: false,
            deleteconfirm: false,
            singleorlist: true
        }
    }
}
</script>
<style scoped>
    th {
        text-align: center;
    }
    /*隐藏scrollbar */
    .hiddenscroll::-webkit-scrollbar { width: 0 !important }
    .hiddenscroll { -ms-overflow-style: none; }
    .hiddenscroll { overflow: -moz-scrollbars-none; }
</style>